<template>
	<view class="pass">
		<image src="../../bc/me.png" mode=""></image><input type="text" v-model="id" placeholder="请输入手机号">
		<view class="box2">
		<input type="text" v-model="yz" placeholder="请输入验证码">
			<button type="default" class="send" @click="send">{{ time }}{{ text }}</button>
		</view>
		<image class="pa" src="../../bc/pass.png" mode=""></image><input type="password" v-model="pass" placeholder="请设置密码">
		<image src="../../bc/pass.png" mode=""></image><input type="password" v-model="pass2" placeholder="请再次确认密码">
		<button @click="sure" class="sures">确定</button>
		
	</view>
</template>

<script>
	import api from '../../common/api.js'
	export default{
		name:'pass',
		data(){
			return{
				id:'',
				yz:'',
				pass:'',
				pass2:'',
				token:'',
				shumatext: false,
				yanzhengnum: '',
				text: '获取验证码',
				time: '',
				disabled: false
			}
		},
		methods:{
			// 获取验证码
			send(){
				if (this.disabled) {
				    return;
				}					 
				this.disabled = true;
				this.setInterValFunc();
				},
				
				setInterValFunc() {
					//倒计时
				    this.time = 60;
				    this.text = '秒后重新发送';
				    this.setTime = setInterval(() => {
				        if (this.time - 1 == 0) {
				            this.time = '';
				            this.text = '重新获取';
				            this.code = '';
				            this.disabled = false;
				            clearInterval(this.setTime);
				        } else {
				            this.time--;
				        }
				    }, 1000);
				},
				sure(){
					console.log(this.id);
					let {pass,pass2,yz,token,id}=this
					if(pass!=pass2){
						uni.showToast({
							title:'两次密码不一样',
							icon:'none'
						})
						return
					}
					// 请求
					this.$api.sendRequest({
						url: api.FORGET_pass,
						data:{
							mobile:id,
							newpassword:pass,
							captcha:yz
						},
						success: res => {
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							})
						}
					});
				}
		},
		created() {
			uni.getStorage({
				key:'token',
				success:res=>{
				this.token=res.data
				}
			})
		}
	}
</script>

<style >
	.pass{
		position: relative;
	}
	image{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 40rpx;
		margin-top: 8rpx;
	}
	.pa{
		position: absolute;
		left: 40rpx;
		margin-top: 50rpx;
	}
	input{
		width: 80%;
		margin: 40rpx auto;
		font-size: 1em;
		font-weight: 500;
		border-bottom: solid 2rpx #F6F6F6;
		padding-left: 60rpx;
		align-items: center;
		padding-bottom: 20rpx;
		opacity: .6;
	}
	.send{
		font-size: 1em;
		height: 60rpx;
	}
	.box2{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-bottom: solid 2rpx #F6F6F6;
		width: 85%;
		margin: auto;
	}
	
	.box2>input{
		width: 45%;
		border: none;
		
	}
	.box2>button{
		width: 36%;
		line-height: 70rpx;
		height: 70rpx;
		font-size: .7em;
		margin-top: 40rpx;
		background: linear-gradient(to right, #3D54EA 50%,#7593FF 100%);
	}
	.sures{
		width: 90%;
		background-color: #207DFE;
		border-radius: 50rpx;
		margin: 60rpx auto;
		color: #FFFFFF;
	}
</style>
